<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>物流详情</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		body {
			background: #f1f1f1;
		}
		.titleBox {
			padding: 0 0.8rem;
			height: 3.2rem;
			background: #FFF1E5;
			color: #FF9850;
		}
		.track-rcol{
			margin-top: 0.4rem;
		}
		.track-rcol .tit{
			height: 2rem;
			line-height: 2rem;
			padding-left: 1rem;
			color: #333;
			border-bottom: 1px solid #e7e7e7;
			font-size: 0.6rem;
		}

		.track-list {
			padding: 1rem;
			padding-top: 0;
			padding-left: 1.25rem;
			position: relative;
		}

		.track-list li {
			position: relative;
			padding: 0.4rem 0 0 0.8rem;
			line-height: 0.9rem;
			border-left: 1px solid #E7E7E7;
			color: #adadad;
		}
		.track-list li.first{
			border-left: none;
		}
		.track-list li.first::before {
			position: absolute;
			bottom: 0;
			left: 0;
			content: "";
			height: 10px;
			width: 1px;
			padding-top: 0;
			background: #E7E7E7;
		}

		.track-list li .node-icon {
			position: absolute;
			left: -0.3rem;
			top: 50%;
			width: 0.55rem;
			height: 0.55rem;
			background-color: #e7e7e7;
			border-radius: 50%;

		}

		.track-list li.first .node-icon {
			width: 0.65rem;
			height: 0.65rem;
			background-color: #E63350;
		}

		.track-list li .time {
			position: relative;
			top: 3px;
			display: block;
			vertical-align: middle;
			font-size: 0.5rem;
		}

		.track-list li .txt {
			position: relative;
			top: 2px;
			font-size:0.6rem;
			display: block;
			vertical-align: middle;
		}
		.icon {
			margin-right: 0.4rem;
			height: 1.2rem;
		}
		.shop {
			padding-top: 0.8rem;
		}

		.order-item  {
			background: #fff;
			padding: 0.8rem 1rem 0.6rem;
		}
		.order-item .inner{
			padding-bottom: 0.8rem;
		}

		.media {
			width: 1.6rem;
		}

		.comBox {
			margin-bottom: 0.4rem;
			padding: 0.2rem 1rem 0.5rem;
		}
		button{
			background: none;
			padding: 0;
		}
		.copy {
			width: 1.8rem;
			height: 0.9rem;
			line-height: 0.9rem;
			border-radius: 2px;
			border: 1px solid #FFA565;
			color: #ff8028;
			font-size: 0.5rem;
			text-align: center;
			margin-top: 0.2rem;
		}
		.info-list li:nth-child(1) {
			padding-top: 0;
		}

		.info-list li {
			line-height: 28px;
		}

		.info-list li p {
			color: #555;
			font-size: 0.6rem;
		}

		.ped-r-6 {
			padding-right: 0.6rem;
		}
	</style>
</head>

<body>
	<!-- 待发货 -->
	<div class="titleBox aui-flex-col aui-flex-between aui-flex-middle">
		<div><img src="../../image/mine/m_icon19.png" class="icon" alt=""></div>
		<div class="flex-auto aui-font-size-14">已签收</div>
		<div class="aui-font-size-12"></div>
	</div>
	<div class="order-item">
		<div class="inner aui-flex-col aui-flex-middle aui-border-b">
			<div class="media"><img src="../../image/demo/03.png" alt=""></div>
			<div class="flex-auto aui-padded-l-10">
				<div class="aui-font-size-12 color-000 aui-ellipsis">心相印卷纸 心柔3层140g*27粒纸巾整箱 新老包装随机...</div>
				<div class="color-555 aui-font-size-10 aui-flex-col aui-flex-between" style="padding-top:0.25rem">
					<div>灰色</div>
					<div>X1</div>
				</div>
			</div>
		</div>
	</div>
	<ul class="comBox info-list bg-white">
		<li class="aui-flex-col">
			<p class="ped-r-6">发货时间：</p>
			<p class="">2018-06-13 14:28:02</p>
		</li>
		<li class="aui-flex-col">
			<p class="ped-r-6">物流公司：</p>
			<p class="">中通</p>
		</li>
		<li class="aui-flex-col">
			<p class="ped-r-6">联系电话：</p>
			<p class="">95311</p>
		</li>
		<li class="aui-flex-col aui-flex-between">
			<p class="ped-r-6">订单编号：</p>
			<!-- <p class="flex-auto" id="content">5284124586123556</p> -->
			<!-- <div class="copy btn" id="copyBT">复制</div> -->
			<input id="foo1" class="flex-auto color-555 aui-font-size-12" value="5284124586123556" readonly="readonly">
			<button class="copy btn" data-clipboard-target="#foo1">复制</button>
		</li>
	</ul>
	<div class="track-rcol bg-white">
		<div class="tit">物流跟踪</div>
		<div class="track-list">
			<ul>
				<li class="first">
					<i class="node-icon"></i>
					<span class="txt color-333">您的快件已签收。感谢您使用中通快递!</span>
					<span class="time">2016-03-10 18:07:15</span>
				</li>

				<li>
					<i class="node-icon"></i>
					<span class="txt">您的快件已由菜鸟驿站代收。请凭取货码及时取件。</span>
					<span class="time">2016-03-10 18:07:15</span>
				</li>

				<li>
					<i class="node-icon"></i>
					<span class="txt">成都市高新区桂溪营业点派件员 中通 速运95338正在为您派件</span>
					<span class="time">2016-03-10 18:07:15</span>
				</li>

				<li>
					<i class="node-icon"></i>
					<span class="txt">快件到达【成都双流集散中心】</span>
					<span class="time">2016-03-10 18:07:15</span>
				</li>

				<li>
					<i class="node-icon"></i>
					<span class="txt">快件在【宁波机场营业点】已经装车，准备发往【宁波姜山集散点】</span>
					<span class="time">2016-03-10 18:07:15</span>
				</li>

				<li>
					<i class="node-icon"></i>
					<span class="txt">申请已揽件</span>
					<span class="time">2016-03-10 18:07:15</span>
				</li>
				<li>
					<i class="node-icon"></i>
					<span class="txt">卖家已发货</span>
					<span class="time">2016-03-10 18:07:15</span>
				</li>
			</ul>
		</div>
	</div>

</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/clipboard.min.js"></script>
<script type="text/javascript">
	apiready = function() {
		api.parseTapmode();
		var clipboard = new ClipboardJS('.btn');
		//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
		clipboard.on('success', function(e) {
				// alert('复制成功!')
				e.clearSelection();
		});
		clipboard.on('error', function(e) {
				alert('请选择“拷贝”进行复制!')
		});
	};
	function change_add(url) {
		api.openWin({
			name: url,
			url: '../mine/' + url + '.html'
		});
	}

	// 选择发票
	function invoice(url) {
		api.openWin({
			name: url,
			url: './' + url + '.html'
		});
	}
</script>

</html>
